<template>
  <el-dialog class="public-dialog" title="退换货审核" width="560" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <p class="text-[14px] leading-[20px] mb-[16px]">
      <span>选中数据：</span>
      <span class="text-[18px] text-[#3366F1]">{{ rows.length }}</span>
    </p>
    <div>
      <XForm ref="form" :formData="formData" :fieldList="fieldList" :options="formOptions" :rules="rules" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button :disabled="loading" @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSave"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"

import XForm from "@/components/XForm/index.vue"
import { returnReview } from "@/views/user/return/api/index"

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  rows: { type: Array, default: () => [] },
})

const emit = defineEmits(["update:modelValue", "refresh"])

const form = ref()
const formData = ref({})
const loading = ref(false)
const fieldList = ref([
  {
    field: "exchange_status",
    type: "select",
    label: "审核操作",
    origin: "order_exchange_status",
    options: {
      data: [],
    },
    itemProps: {
      popperAppendToBody: true,
      teleported: true,
    },
  },
  {
    field: "review_notes",
    label: "备注信息",
    type: "textarea",
    autosize: { minRows: 2, maxRows: 6 },
  },
])

const rules = reactive({
  refund_status: [{ required: true, message: "请选择审核操作", trigger: "blur" }],
})

const handleSave = async () => {
  try {
    loading.value = true
    await form.value.submit()
    await returnReview({
      ...formData.value,
      ids: props.rows?.map((n) => n.id),
    })
    ElMessage.success("审核成功")
    handleClose(true)
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

const handleClose = (refresh) => {
  emit("update:modelValue", false)
  form.value.resetForm()
  if (refresh) emit("refresh")
}

const formOptions = {
  labelPosition: "top",
}
</script>
